.wii-main {
	padding: 0rpx;

	.top-bar {
		position: relative;
		z-index: 9;
		padding: 47*2rpx 0;
		width: 100%;
		color: #fff;
		text-align: center;
		background: url(http://mat1.gtimg.com/auto/2017/wii_cli/1514081548624/bg.jpg) no-repeat;

		.top-content {
			display: flex;
			height: 36*2rpx;
			line-height: 36*2rpx;

			>view {
				font-size: 14px;

				&.wii-input {
					flex: 1;
					font-size: 13px;
					background-color: #fff;
					text-align: left;

					input {
						height: 100%;
						line-height: 100%;
					}

				}

				&:first-child {
					width: 73*2rpx;
				}

				&:last-child {
					width: 58*2rpx;
				}

			}
			.goto-cx {
				background: url(http://mat1.gtimg.com/auto/2017/wii2/1515635139587/cx_ani.png) no-repeat;
				// background: url(http://mat1.gtimg.com/auto/2017/wii2/1515571235678/cx_an_test.png) no-repeat;
				background-size: 810*0.5px;
				-webkit-animation: animate 4s infinite step-start;
				animation: animate 4s infinite step-start;
				background-position: (0rpx) 0;
				// -webkit-animation: animateone 4s steps(9) infinite;
				// animation: animateone 4s steps(9) infinite;
				height: 76*2rpx;
				width: 90*0.5*2rpx;
				margin-top: -14*2rpx;
			}

			@media screen and  (min-width: 400px){
			  .goto-cx {
					background: url(http://mat1.gtimg.com/auto/2017/wii2/1515635139587/cx_ani.png) no-repeat;
					// background: url(http://mat1.gtimg.com/auto/2017/wii2/1515571235678/cx_an_test.png) no-repeat;
					background-size: 810*0.6px;
					-webkit-animation: animatetwo 4s infinite step-start;
					animation: animatetwo 4s infinite step-start;
					background-position: (0rpx) 0;
					// -webkit-animation: animateone 4s steps(9) infinite;
					// animation: animateone 4s steps(9) infinite;
					height: 76*2rpx;
					width: 90*0.6*2rpx;
					margin-top: -14*2rpx;
				}
			}

		}

	}

}

@keyframes animateone {
	
	0% {
		background-position: 0 0;
	}

	50% {
		background-position: -810*0.5px 0;
	}

	75% {
		background-position: -810*0.5px 0;
	}

	100% {
		background-position: -810*0.5px 0;
	}

}

@keyframes animate {
	0% {
    background-position: (0rpx) 0;
  }

  6.75% {
    background-position: (-90*0.5px) 0;
  }

  12.5% {
    background-position: (-180*0.5px) 0;
  }

  18.75% {
    background-position: (-270*0.5px) 0;
  }

  25% {
    background-position: (-360*0.5px) 0;
  }

  31.25% {
    background-position: (-450*0.5px) 0;
  }

  37.5% {
    background-position: (-540*0.5px) 0;
  }

  43.75% {
    background-position: (-630*0.5px) 0;
  }

  50% {
    background-position: (-720*0.5px) 0;
  }

  100% {
    background-position: (-720*0.5px) 0;
  }

	
	// from {
	// 	background-position: 0 0;
	// }

	// to {
	// 	background-position: -768px 0;
	// }

}

@keyframes animatetwo {
	0% {
    background-position: (0rpx) 0;
  }

  6.75% {
    background-position: (-90*0.6px) 0;
  }

  12.5% {
    background-position: (-180*0.6px) 0;
  }

  18.75% {
    background-position: (-270*0.6px) 0;
  }

  25% {
    background-position: (-360*0.6px) 0;
  }

  31.25% {
    background-position: (-450*0.6px) 0;
  }

  37.5% {
    background-position: (-540*0.6px) 0;
  }

  43.75% {
    background-position: (-630*0.6px) 0;
  }

  50% {
    background-position: (-720*0.6px) 0;
  }

  100% {
    background-position: (-720*0.6px) 0;
  }

}